<template>
  <div class="cart">
    <section v-for="(v, i) in arr" :key="i">
      <div class="title">
        <div class="left">
          <input type="checkbox" id="checkone" />
          <img :src="v.storesrc" alt="" />
          <span class="store">{{ v.store }}</span>
          <span class="da">&gt;</span>
        </div>
        <div class="right">
          <div class="quan">领券</div>
        </div>
      </div>
      <div class="content">
          <input type="checkbox">
          <img :src="v.src" alt="">
            <div class="detail">
                <h3>{{v.name}}</h3>
                <p>{{v.des}}</p>
                <div class="lastcart">
                    <div class="money">
                        <span class="d">￥</span>
                        <span class="mon">{{v.money}}</span>
                    </div>
                    <div class="number">×{{v.number}}</div>
                </div>
            </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          storesrc: "/img/cart_06.jpg",
          store: "港威奴旗舰店",
          src: "/img/cart_11.jpg",
          name: "男士透气休闲风内增高大码帆",
          des: "8872黑白四季款;41",
          money: "39",
          number: "1",
        },
        {
          storesrc: "/img/cart_06.jpg",
          store: "本本图书专营店",
          src: "/img/cart_14.jpg",
          name: "【正版原著送书签】 稻盛和夫",
          des: "",
          money: "18",
          number: "1",
        },
        {
          storesrc: "/img/cart_06.jpg",
          store: "红彤彤服装专营店",
          src: "/img/cart_16.jpg",
          name: "加绒线衣线裤棉毛衫保暖内衣",
          des: "【加绒】套装-黑色;",
          money: "138",
          number: "1",
        },
      ],
    };
  },
};
</script>

<style scoped>
.cart {
  margin-top: 10rem;
}
section {
  margin: 0 auto;
  margin-bottom: 10rem;
  border-radius: 10rem;
  width: 347rem;
  height: 177px;
  background: #fff;
}
.title {
    height: 57rem;
  display: flex;
  padding: 0 12rem;
  align-items: center;
  justify-content: space-between;
}
.title .left{
    display: flex;
  align-items: center;
  justify-content: space-between;
}
.title .left input{
    width: 20rem;
    height: 20rem;
    margin-right: 12rem;
}
.title .left img{
    width: 20rem;
    height: 16rem;
    margin-right: 7rem;
}
.title .left .store{
    font-size: 14rem;
    margin-right: 6rem;
    font-weight: bold;
}
.title .left .da{
    font-size: 13rem;
    color: #dedede;
    font-family: '黑体';
}
.content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12rem;
}
.content input{
    width: 20rem;
    height: 20rem;
    margin-right: 12rem;
}
.content img{
    width: 106rem;
    height: 106rem;
}
.content .detail{
    width: 178rem;
    margin-left: 7rem;
}
.content .detail h3{
    margin-bottom: 17rem;
    font-weight: bold;
}
.content .detail p{
    color: #9c9c9c;
    margin-bottom: 16rem;
}
.content .detail .lastcart{
    height: 28rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content .detail .lastcart .money{
    color: #ef5718;
}
.content .detail .lastcart .money .d{
    font-size: 12rem;
    transform: scale(0.8);
}
.content .detail .lastcart .money .mon{
    font-size: 15rem;
    margin-left: 2rem;
}
.content .detail .lastcart .number{
    width: 28px;
    height: 28rem;
    border: 1px solid #e6e6e6;
    border-radius: 4rem;
    text-align: center;
    line-height: 26rem;
}
</style>
